<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-15 10:19:24
 * @LastEditTime: 2019-10-19 00:59:51
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="app">
    <el-container>
      <el-aside width="22%"
        class="app-side app-side-left" 
        :class="isCollapse ? 'app-side-collapsed' : 'app-side-expanded'"
      >
        <div>
          <Sidebar  :collapse="isCollapse" :routes="$router.options.routes[1].children" />
          <!-- 我是样例菜单 -->
          <!-- <el-menu
            :default-active="defaultActive"
            router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            :collapse="isCollapse"
          >
            <template
              v-for="route in $router.options.routes"
              v-if="route.children && route.children.length"
            >
              <template v-for="item in route.children">
                <el-menu-item :key="route.path + '/' + item.path" :index="item.path">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
              </template>
            </template>
          </el-menu>-->
        </div>
      </el-aside>

      <el-container>
        <el-header class="app-header">
          <el-menu
            default-active="/"
            router
            class="el-menu-demo tab-page"
            mode="horizontal"
            active-text-color="#409EFF"
          >
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item style="float:right">
              <div class="app-header-userinfo">
                <el-dropdown trigger="hover" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    {{ user }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>我的消息</el-dropdown-item>
                    <el-dropdown-item>设置</el-dropdown-item>
                    <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-menu-item>
          </el-menu>
        </el-header>

        <el-main class="app-body">
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
           
            <el-breadcrumb-item  v-for="(list,index) in routers" :key="index">{{list}}</el-breadcrumb-item>
         
          </el-breadcrumb> -->
          <template>
            <router-view />
          </template>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Sidebar from "@/components/Sidebar";
import vuex from 'vuex';
export default {
  name: "Container",
  data() {
    return {
      username: "",
      isCollapse: false,
      user: sessionStorage.getItem("user"),
      routers:[]
    };
  },
  created(){
    console.log(this.$store.state.userinfo)
    console.log(this.$router.history.current.name)
    this.routers=this.$router.history.current.name;
  },
  components: {
    Sidebar
  },
  methods: {
    toggleSideBar() {
      this.isCollapse = !this.isCollapse;
    },
    logout: function() {
      this.$confirm("确认退出?", "提示", {})
        .then(() => {
          sessionStorage.removeItem("user");
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    handleCommand(command) {
      if (command == "loginout") {
        //清除用户信息

        this.$router.push("/login");
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted: function() {
    let user = sessionStorage.getItem("user");
    if (user) {
      this.username = user;
    }
  },

  computed: {
    defaultActive() {
      return "/" + this.$route.path.split("/").reverse()[0];
    }
    // logout(){
    //   this.$router.push('/login');
    // }
  }
};
</script>

<style>
.app-side{
     background: #eef1f6;
}
</style>